import { Tag } from 'antd'
import { AvatarImage } from '@/desktop/components/avatar'
import { ellipsis } from '@/desktop/styles'
import { type Task, useQywxs } from '../logics'

export function TargetQywxs({ task }: { task: Task }) {
  const { qywxs } = useQywxs()
  const qywxMap = useMemo(() => new Map((qywxs ?? []).map(v => [v.wxid, v])), [qywxs])

  return <div>
    {task.externalWxids.map(wxid => {
      const qywx = qywxMap.get(wxid)
      return <div key={wxid} css={s.qywx}>
        <AvatarImage src={qywx?.avatar} size={32} preview={false} />
        <div>{qywxMap.get(wxid)?.friendlyFullName ?? wxid}</div>
      </div>
    })}
  </div>
}

const s = {
  qywx: css`
    align-items: center;
    column-gap: 10px;
    display: flex;
    overflow: hidden;
    &:not(:last-child) {
      margin-bottom: 8px;
    }
    .ant-tag {
      margin-right: 0;
    }
    .name {
      ${ellipsis};
    }
  `,
}
